Button Groups

Component Overview

Variants & States

You can group buttons together to create a navigation bar.

Basedev ready

Preview

Code

<div class="slds-button-group" role="group">
  <button class="slds-button slds-button--neutral">Refresh</button>
  <button class="slds-button slds-button--neutral">Edit</button>
  <button class="slds-button slds-button--neutral">Save</button>
  <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">More Actions</span>
  </button>
</div>

When the icon button is disabled, it disappears. When the disabled attribute is placed on the icon button, the .slds-button--last class must be appended to the final button in the group. If the last button is wrapped in another element, place the .slds-button--last class on the wrapping element instead.

For the inverse version of the button group, use the .slds-button--inverse class.

Note: The inverse group is seen on the edit dashboard. The disabled attribute might not be applicable in this situation.

Icon Groupdev ready

Preview

Code

<div class="slds-button-group" role="group">
  <button class="slds-button slds-button--icon-border">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
    </svg>
    <span class="slds-assistive-text">Charts</span>
  </button>
  <button class="slds-button slds-button--icon-border">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
    </svg>
    <span class="slds-assistive-text">Filter List</span>
  </button>
  <button class="slds-button slds-button--icon-more" aria-haspopup="true">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#sort"></use>
    </svg>
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--x-small">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">More Actions</span>
  </button>
</div>

An icon group is primarily used in the anchor of a page that can change views or be sorted. It usually contains stateful icon buttons.

Component Overview

Buttons in a group are surrounded by a parent with the .slds-button-group class. If the last button is an icon, like the down triangle, use the .slds-button--icon-border-filled class when accompanying a .slds-button--neutral group. If you would like it to hide when disabled, add the .slds-toggle-visibility class. When hiding the final icon when disabled, the icon to its left should receive the .slds-button--last so it receives the proper styling.

If the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the .slds-button--last class to the wrapper element to create proper spacing and borders.

Accessibility

Include the Aria role role="group" so that assistive technologies are alerted to the grouping.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create button-groups.
Class NameUsage
.slds-button-group
Applied to:

div

Outcome:

Initializes a grouped set of buttons

Required:

Required

Comments:

Changes the rounding and borders of buttons within to look like a group

.slds-button--last
Applied to:

button wrapper

Outcome:

Identifies the last button when wrapped in another element

Required:

No, optional element or modifier

Comments:

Only required if the .slds-button is wrapped. ie- to include a dropdown

.slds-toggle-visibility
Applied to:

.slds-button

Outcome:

Identifies the last icon button when it should be hidden when `[disabled]`

Required:

No, optional element or modifier

Comments:

Only required when you want the the icon button indicating there's more data to be hidden when inactive/disabled